<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-form ref="form" label-width="80px">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="handleAdd">新增员工</el-button>
            <el-input style="width:200px;" v-model="userName" clearable placeholder="用户名" class="handle-input mr10"></el-input>
            <el-select style="with:50px;" v-model="userNumber" clearable placeholder="请选择权限">
              <el-option v-for="item in dutyData" :label="item.roleName" :value="item.roleName"></el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="research()">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%" ref="multipleTable">
        <el-table-column prop="user_name" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="userNumber" label="姓名">
        </el-table-column>
        <el-table-column prop="userNumber" label="密码">
        </el-table-column>
        <el-table-column prop="userNumber" label="性别">
        </el-table-column>
        <el-table-column prop="userNumber" label="电话">
        </el-table-column>
        <el-table-column prop="userNumber" label="邮件">
        </el-table-column>
        <el-table-column prop="userNumber" label="入职日期">
        </el-table-column>
        <el-table-column prop="userNumber" label="离职日期">
        </el-table-column>
        <el-table-column prop="userNumber" label="技能">
        </el-table-column>
        <el-table-column prop="userNumber" label="权限">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" icon="el-icon-close" type="danger" @click="handleDel(scope.$index, scope.row)">删除</el-button>
            <el-button size="small" icon="el-icon-setting" type="success" @click="handleDuty(scope.$index, scope.row)">权限配置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="page_size" :total='total'>
        </el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="员工">
          <el-input v-model="form.user_name"></el-input>
        </el-form-item>
        <el-form-item label="输入密码">
          <el-input v-model="form.userPasswrod"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.userPasswrod1"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹出框 -->
    <el-dialog title="新增" :visible.sync="addVisible" width="30%" @close="closeAddDialog">
      <el-form ref="form" :model="addform" label-width="70px">
        <el-form-item label="员工">
          <el-input v-model="addform.user_name"></el-input>
        </el-form-item>
        <el-form-item label="输入密码">
          <el-input v-model="addform.userPasswrod"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="addform.userPasswrod1"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteRow">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 职位配置弹出框 -->
    <el-dialog title="权限配置" :visible.sync="dutyVisible" width="30%" @close="closeDialog">
      <el-table :data="dutyData" border height="300" style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="roleName" label="权限名称">
        </el-table-column>
        <!-- <el-table-column prop="roleCode" label="权限编码">
        </el-table-column> -->
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dutyVisible = false">取 消</el-button>
        <el-button @click="updateDuty">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      url: this.url_,
      tableData: [], //用户信息表格数据
      dutyData: [],//职位表格信息
      cur_page: 1, //分页
      multipleSelection: [], //已经勾选的数据
      total: 10, //分页总条数
      page_size: 10, //分页每页条数
      userName: "", //查询条件用户名
      userNumber: "", //查询条件对应职责
      editVisible: false, //编辑弹出框
      delVisible: false, //删除弹出框
      addVisible: false, //新增弹出框
      dutyVisible: false,//职位配置弹出框
      selctRow: [],//待勾选的职位
      form: {
        //编辑对话框内容
        id: "",
        user_name: "",
        user_number: "",
        userPasswrod: "",
        userPasswrod1: ""
      },
      addform: {
        //新增对话框内容
        id: "",
        user_name: "",
        userPasswrod: "",
        userPasswrod1: ""
      },
      delform: {}, //需要删除的数据
      idxData: '',//当前选择的用户
      idx: -1 //数据下标
    };
  },
  created() {
    //在模板渲染成html前调用，即通常初始化某些属性值
    this.getData();
    this.researchDuty();
  },
  computed: {
    //在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData(val);
    },
    handleEdit(index, row) {
      //打开编辑对话框
      this.idx = index;
      this.form = {
        id: row.id,
        user_name: row.user_name,
        user_number: row.user_number,
        userPasswrod: "",
        userPasswrod1: ""
      };
      this.editVisible = true;
    },
    handleAdd() {
      //打开新增对话框
      this.addVisible = true;
    },
    handleDel(index, row) {
      //打开删除对话框
      this.idx = index;
      this.delform = row;
      this.delVisible = true;
    },
    handleDuty(index, row) {
      //打开职位配置对话框
      this.idx = index;
      this.idxData = row;
      this.dutyVisible = true;
      for (var i = 0; i < this.dutyData.length; i++) {
        for (var j = 0; j < row.user_number.length; j++) {
          if (this.dutyData[i].id == row.user_number[j].id) {
            this.selctRow.push(this.dutyData[i]);
          }
        }
      }
      this.$nextTick(function () {
        this.toggleSelection(this.selctRow);
      })
    },
    research() {
      //查询按钮
      this.getData();
    },
    saveEdit() {
      //编辑确定按钮
      this.saveData();
    },
    add() {
      //新增确定按钮
      this.addData();
    },
    deleteRow() {
      //删除确定按钮
      this.delData();
    },
    handleSelectionChange(val) {//已选择的职位
      this.multipleSelection = val;
    },
    // 查询用户数据
    getData(val) {
      this.$axios({
        method: "post",
        url: this.url + "userInfo/disylayAll.do",
        params: {
          page: val,
          rows: this.page_size,
          userName: this.userName,
          userNumber: this.userNumber
        }
      }).then(res => {
        var tableDatas = [];
        if (res.data.message) {
          for (var i = 0; i < res.data.data.rows.length; i++) {
            tableDatas[i] = res.data.data.rows[i];
            for (var j = 0; j < res.data.data.rows[i].user_number.length; j++) {
              if (tableDatas[i].userNumber) {
                tableDatas[i].userNumber = tableDatas[i].userNumber + '、' + res.data.data.rows[i].user_number[j].role_name;
              } else {
                tableDatas[i].userNumber = res.data.data.rows[i].user_number[j].role_name;
              }
            }
          }
          this.tableData = tableDatas;
          this.total = res.data.data.total;
        } else {
          this.$message.error('查询失败');
        }
      });
    },
    saveData() {
      //保存编辑
      if (!this.form.userPasswrod || !this.form.userPasswrod1) {
        this.$message.error("密码不能为空");
      } else if (this.form.userPasswrod == this.form.userPasswrod1) {
        this.$axios({
          method: "post",
          url: this.url + "userInfo/updateUser.do",
          params: {
            id: this.form.id,
            userName: this.form.user_name,
            userPasswrod: this.form.userPasswrod
          }
        }).then(res => {
          if (res.data.message) {
            this.getData(this.cur_page);
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
          }
        });
      } else {
        this.$message.error("两次密码不一致");
      }
    },
    addData() {
      //新增用户
      if (!this.addform.userPasswrod || !this.addform.userPasswrod1) {
        this.$message.error("密码不能为空");
      } else if (this.addform.userPasswrod == this.addform.userPasswrod1) {
        this.$axios({
          method: "post",
          url: this.url + "userInfo/add.do",
          params: {
            userName: this.addform.user_name,
            userPasswrod: this.addform.userPasswrod,
          }
        }).then(res => {
          if (res.status == "200") {
            this.getData(this.cur_page);
            this.addVisible = false;
            this.$message.success(`新增 ${this.addform.user_name} 用户成功`);
          }
        });
      } else {
        this.$message.error("两次密码不一致");
      }
    },
    closeAddDialog() {
      //新增对话框关闭事件
      this.addform = {};
    },
    delData() {
      //删除用户
      this.$axios({
        method: "post",
        url: this.url + "userInfo/delUser.do",
        params: {
          id: this.delform.id
        }
      }).then(res => {
        if (res.status == "200") {
          if (this.idx == 0 && this.cur_page != 1) {
            this.getData(this.cur_page - 1);
          } else {
            this.getData(this.cur_page);
          }
          this.delVisible = false;
          this.$message.success(`删除 ${this.delform.user_name} 用户成功`);
        }
      });
    },
    researchDuty() {
      //查询所有职位
      this.$axios({
        method: "post",
        url: this.url + "role/xs.do",
        params: {}
      }).then(res => {
        if (res.status == "200") {
          this.dutyData = res.data.data.rows;
        }
      });
    },
    toggleSelection(selctRow) {
      //需要勾选的数据
      if (selctRow) {
        selctRow.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      }
    },
    closeDialog() {
      //职位对话框关闭事件
      this.selctRow = [];
      this.$refs.multipleTable.clearSelection();
    },
    updateDuty() {
      //新增用户权限  
      var json = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        json.push({
          id: this.multipleSelection[i].id
        })
      }
      this.$axios({
        method: "post",
        url: this.url + "role/settingsAuthority.do",
        params: {
          id: this.idxData.id,
          json: JSON.stringify(json),
        }
      }).then(res => {
        if (res.status == "200") {
          this.getData(this.cur_page);
          this.dutyVisible = false;
        }
      });
    },
  }
};
</script>
<style>
.el-form-item__content{
  margin-left: 0 !important;
}
.el-dialog .el-form-item__content{
  margin-left: 80px !important;
}
</style>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
</style>
